<%@page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib uri="http://chances.com.cn/jsp/epgdata" prefix="epgdata"%>

<!DOCTYPE html>
<html>
<head>
	<title>SMART_TV</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">	
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
<%@include file="/sites/weixin/js/common.jsp" %>
<%@include file="/sites/weixin/common/common_js.jsp" %>
<script type="text/javascript" src="${_templatePath}/js/wx.js"></script>
<link rel="stylesheet" type="text/css" href="${_contextPath}/sites/weixin/css/wx.css" />
<style>.swiper-slide {margin-right:8%;} .whiteColor{color:#fff}</style>
<body onload="init()">
<epgdata:content type="series" var="content" code="${_context.contentCode}" />
<epgutils:contentConvert var="seriesConvert" content="${content}"/>
<div id="app">
	<!-- 头部 -->
	<div class="row menu-row navbar-fixed-top">
		<div class="col-xs-2 menu-col"  onclick="onBackEvent();">
			<img src="${_templatePath}/images/back.png" class="menu-col-back"/>
		</div>
		<div class="col-xs-8 detail-title" v-text="series.title"></div>
		<div class="col-xs-2 menu-col" @click="collect(series.contentCode,series.title,series.poster,'series','',userId,category)">
			<img id="collectImage" src="${_contextPath}/sites/weixin/images/wx_collect.png" class="menu-col-back"/>
		</div>
	</div>
	<!-- 剧集介绍 -->
	<div class="row row-detail" style="margin-top:4em;">
		<div class="col-xs-4 row-empty">
			<img  class="lazyImg content-image" src="${_contextPath}/sites/images/defaultBg_2.jpg" :data-original="resourcePath+series.poster"/>
		</div>
		<div class="col-xs-8 col-content">
			<div class="detail-title-small" v-text="series.title"></div>
			<div class="detail-text"><span>类型：</span><span style="color:#aaaaaa" >${seriesConvert.contentBaseTags}</span></div>	
			<div class="detail-text"><span>导演：</span><span style="color:#aaaaaa" v-text="series.director"></span></div>
			<div class="two-line" ><span style="color:#000;">主演：</span><span v-text="series.actors"></span></div>
			<div class="div-image-tv" @click="playSeries()">
				<img style="max-width:70px;" src="${_templatePath}/images/tvshow.png"/>
			</div>
		</div>
	</div>
	<div class="row detail-description">
		<div class="col-xs-12 row-empty"><span>简介：</span><span style="color:#aaaaaa" v-text="series.summaryMedium"></span></div>
	</div>
	<div class="index-line-detail"></div>	
	<div class="row row-detail" >
		<div class="col-xs-3 row-empty"><img src="${_templatePath}/images/jj.png" style="max-height: 2em;"/></div>
		<div class="col-xs-9 series-update" v-text="isFinished?series.episodeNumber+'集全':'更新至'+series.updateNum+'集/共'+series.episodeNumber+'集'"></div>
	</div>
	<div class="index-line-detail" style="height:0.2em;"></div>
		
	<!-- 集数区间选择 -->
	<div  id="scroll_menu_swiper"  class="swiper-container" >
		<div v-if="tabNum > 0" id="scroll_menu"  class="swiper-wrapper" style="margin-left:3%;">
			<template v-for="n in tabNum">
				<div class="swiper-slide">
					<div :id="'tab_'+n" class="inner-ep" @click="chooseTab(n);" v-text="getTabText(n)"></div>
				</div>
			</template>
		</div>
	</div>
	<!-- 集数 -->
	<div v-if="pageCount > 0" class="row row-ep-num">
		<template v-for="n in pageCount">
			<div  class="col-xs-5ths-ep"  :id="'ep_'+n"
				@click="chooseFcs(n,getNum(n))" :class="{whiteColor:isUnLine(n)}" v-text="getNum(n)"></div>
		</template>
	</div>
	
	<!-- 相关推荐 -->
	<div class="row row-detial-rel">
		<div class="col-xs-3" style="padding-left:0.4em;"><img src="${_templatePath}/images/xg.png" style="max-height: 2em;"/></div>
	</div>
	<div class="row row-empty">
		<template v-for="(item,index) in seriesRelateCat.resultSet">
			<template v-if="index%3 == 0">
				<div class="row row-empty"></div>
			</template>
			<div class="col-xs-4 detail-rel" >
				<div style="overflow: hidden" :id="'series_'+index" 
					@click="gotoLink(item.url,'rel_series_'+index)">
					<img  class="lazyImg content-image" src="${_contextPath}/images/defaultBg_2.jpg" 
						:data-original="item.poster"/>
				</div>
				<div class="index-text" v-text="item.title"></div>
				<div v-if="item.type == 'series'" class="update-to" v-text="item.isFinished?item.updateNum+'集全':'更新至'+item.updateNum+'集'"></div>
			</div>
		</template>
	</div>
	<div id="alertDiv" class="navbar-fixed-bottom detail-alert"></div>
</div>
<!-- 提示缺失集数未上线 -->
<div id="notOnLine" style="display:none;text-align:center;line-height:5em; position:fixed;left:15%;top:40%; width: 70%;height:5em;background-color: black;color:white;border-radius:1em;font-size:1.5em;z-index:99999;opacity:0.6;">抱歉，本集未上线！</div>
<%@include file="/sites/weixin/common/bodyEndVm.jsp" %>
</body>
<script>
var vm = new Vue({
	el:"#app",
	data:{
		resourcePath:'${_resourcePath}',
		contextPath:'${_contextPath}',
		series:'',
		seriesRelateCat:'',
		tabNum:1,
		pageCount:0,
		pageSize:20,
		currentTabIdx:1,
		currentEpId:-1,
		items:[],
		isFinished:false,
		updateNum:0,
		userId:'${EPG_USER_SESSION.userId}',
		category:'${_context.containerCode}',
		focusEpiTabIdx:-1,
		unLineEdx:[],
		whiteColor:{
			color:'white'
		}
	},
    mounted: function () {
		this.$nextTick(function () {
			this.getSeries();
			this.initCollectImage(this.series.contentCode);
			this.setTabNum(this.series.updateNum);
			this.getSeriesRelateCat();
			this.startSwiper();
			//this.chooseTab(1);
			this.initTab();
			this.lazyLoad();
			this.initUnLineEdx();
	 	});
    },
	methods:{
		getSeries:function(){
			$.ajax({
				method:"get",
				url:"${_contextPath}/api/series/${_context.contentCode}.json",
				async:false,
				success:function(data){
					console.log("series");
					console.log(data);
					vm.series = data.result;
					if(vm.series){}else{
						vm.series = {};
					}
					var arr = data.items;
					vm.items = arr;
					if(arr && arr.length > 0){
						vm.series.updateNum = arr[arr.length-1].episodeIndex;
					}else{
						vm.series.updateNum = 0;
					}
					if(vm.series.updateNum == vm.series.episodeNumber){
						vm.isFinished  = true;
					}
				}
			});
		},
		setTabNum:function(updateNum){
			this.tabNum = this.countTabNum(updateNum,20);
		},
		countTabNum:countTabNum,
		getSeriesRelateCat:function(){
			var paramsRelate = {
					size:6,
					isRandom:true,
					p_idx:1,
					bizCode:"${_context.bizCode}",
					siteCode:"${_context.siteCode}",
					categoryCode:"${_context.containerCode}",
					type:'电视剧'
			};
			$.ajax({
				method:"get",
				//url:"${_contextPath}/api/categoryItemProxy/series/${_context.containerCode}.json?size=6&random=true&bizCode=${_context.bizCode}&siteCode=${_context.siteCode}",
				url:"${_contextPath}/api/search/filter.json",
				data:paramsRelate,
				async:false,
				success:function(data){
					/* console.log("related:");
					console.log(data); */
					vm.seriesRelateCat = data;
				}
			});
		},
		lazyLoad:function(){
			$(document).ready(function(){
				$(".lazyImg").lazyload({ 
			        placeholder : "images/defaultBg_3.jpg", 
			        effect : "fadeIn" 
		   			}); 
			});
		},
		startSwiper:function(){
			$(document).ready(function(){
			   var names = ["#scroll_menu_swiper"];
		   		$.each(names,function(i,val){
		   			 var swiper1 = new Swiper(val, {
		    			  	 slidesPerView: 'auto',
		       				 //spaceBetween: 10
		   			 });
		   		});
			 });
		},
		getTabText:function(tabIdx){
			//console.log(tabIdx);
			if(tabIdx < this.tabNum){
				return parseInt((tabIdx-1)*20+1) + '-' + tabIdx*20;
			}else{
				return parseInt((tabIdx-1)*20+1) + '-' + this.series.updateNum;
			}
		},
		getNum:function(n){
			return (this.currentTabIdx-1)*20+n;
		},
		chooseTab:function(tabIdx){
			//有的内容没有子集
			if(this.tabNum == 0){
				return;
			}
			if(tabIdx == this.tabNum){
				this.pageCount = this.series.updateNum%20;
				if(this.pageCount == 0 && this.series.updateNum > 0){
					this.pageCount = 20;
				}
			}else{
				this.pageCount = 20;
			}
			$("#tab_"+this.currentTabIdx).css("color","#000000");
			this.currentTabIdx = tabIdx;
			setTimeout(function(){
				$("#tab_"+tabIdx).css("color","#16a3b7");
			},100);
			
			//选中子集在当前页显示聚焦效果，否则清除聚焦效果
			if(this.focusEpiTabIdx == this.currentTabIdx){
				var idx = this.currentEpId;
				setTimeout(function(){
					$("#ep_"+idx).addClass("col-xs-5ths-ep-fcs");
				},100);
			}else{
				this.clearCurrentEpi();
			}
		},
		initTab:function(){
			if(strExist("${param.epiCode}")){
				var epIdx = this.getEpisodeIndex("${param.epiCode}");
				/* console.log("curentTabNum");
				console.log(this.countTabNum(epIdx)); */
				this.chooseTab(this.countTabNum(epIdx,20));
				var idx = epIdx%this.pageSize;
				idx = (idx==0?this.pageSize:idx);
				this.changeStyle(idx);
			}else{
				this.chooseTab(1);
			}
		},
		initUnLineEdx:function(){
			for(var i=1;i<this.series.updateNum;i++){
				var noEp = true;
				for(var j=0;j<this.items.length;j++){
					if(this.items[j].episodeIndex == i){
						noEp = false;
						break;
					}
				}
				if(noEp){
					this.unLineEdx.push(i);
				}
			}
		},
		isUnLine:function(num){
			var num = this.getNum(num);
			for(var i=0;i<this.unLineEdx.length;i++){
				if(num == this.unLineEdx[i]){
					return true;
				}
			}
			return false;
		},
		chooseFcs:function(num,epId){
			//获取传入集数在子集数组中的索引
			var idx = this.getIdxInArr(epId);
			if(idx == -1){
				this.alertUnline();
				return;
			}
			this.changeStyle(num);
			var params = {
				userId:'${EPG_USER_SESSION.userId}',
				type:'series',
				code:this.items[idx].contentCode,
				prog:this.series.contentCode,
				title:this.items[idx].contentTitle,
				icon:''
			}
			play(params,"${personUrl}",'playSeries');
		},
		changeStyle:function(num){
			$("#ep_"+this.currentEpId).removeClass().addClass("col-xs-5ths-ep");
			this.currentEpId = num;
			this.focusEpiTabIdx = this.currentTabIdx;
			var idx = this.currentEpId;
			setTimeout(function(){
				$("#ep_"+idx).addClass("col-xs-5ths-ep-fcs");
			},100);
		},
		playSeries:function(){
			if(this.items.length == 0){
				return true;
			}
			var idx = this.getIdxInArr(1);
			if(idx == -1){
				this.alertUnline();
				return;
			}
			this.clearCurrentEpi();
			this.focusEpiTabIdx = 1;
			this.currentEpId = 1;
			this.focusFirstEpi();
			var params = {
					userId:'${EPG_USER_SESSION.userId}',
					type:'series',
					code:this.items[0].contentCode,
					prog:this.series.contentCode,
					title:this.items[0].contentTitle,
					icon:''
			};
			play(params,"${personUrl}",'series_detail');
		},
		clearCurrentEpi:function(){
			$("#ep_"+this.currentEpId).removeClass().addClass("col-xs-5ths-ep");
		},
		focusFirstEpi:function(){
			if(this.currentTabIdx == 1){
				$("#ep_"+this.currentEpId).addClass("col-xs-5ths-ep-fcs");
			}
		},
		getIdxInArr:function(epId){
			var idx = -1;
			for(var i=0;i<this.items.length;i++){
				if(this.items[i].episodeIndex == epId){
					idx = i;
					break;
				}
			}
			return idx;
		},
		getEpisodeIndex:function(epICode){
			var idx = 1;
			for(var i=0;i<this.items.length;i++){
				if(this.items[i].contentCode == epICode){
					idx = this.items[i].episodeIndex;
					break;
				}
			}
			return idx;
		},
		alertUnline:function(){
			$("#notOnLine").show();
			setTimeout(function(){
				$("#notOnLine").hide();
			},800);
		},
		collect:collect,
		initCollectImage:initCollectImage,
		gotoLink:gotoLink
	}
});
function init(){
	
}
</script>
</html>